<template>
	<div class="sidebar">
		<el-menu theme="dark" class="sidebar-el-menu"  active-text-color="#409EFF" unique-opened :default-active="activePath" :collapse="collapse" router>
			<template v-for="(item,index) in items">
				<!-- 判断一级菜单 没有子菜单 -->
				<el-menu-item :index="item.menuUrl" @click="saveNavState(item.menuUrl)" v-if="!item.child">
					<i :class="item.menuIcon" class="icon"></i>
					<span v-if="!collapse">{{ item.menuName }}</span>
				</el-menu-item>
				<el-submenu :index="item.menuUrl"  :key="index" v-if="item.child">
					<!-- 判断二级菜单 有子菜单 -->
					<el-menu-item
						:index="child.menuUrl"
						v-for="child in item.child"
						:key="child.id"
						@click="saveNavState(child.menuUrl)"
						v-if="!child.grandson"
					>
						<i :class="child.menuIcon" class="icon"></i>
						<span >{{ child.menuName }}</span>
					</el-menu-item>
					<template slot="title" v-if="item.child">
						<i :class="item.menuIcon" class="icon"></i>
						<span v-if="!collapse">{{ item.menuName }}</span>
					</template>
				</el-submenu>
			</template>
		</el-menu>
	</div>
</template>

<script>
import bus from '../common/bus';
export default {
	data() {
		return {
			collapse: false,
			activePath:'/index',
			items: [
				{
					id: 1,
					menuLevel: 0,
					menuIcon: 'el-icon-lx-home',
					menuUrl: '/index',
					menuName: '系统首页'
				},
				{
					id: 2,
					menuUrl: '/productList',
					menuName: '数据管理',
					menuIcon: 'el-icon-s-data',
					child: [
						{
							menuUrl: '/productList',
							menuLevel: 1,
							menuName: '交易品种',
							menuIcon: 'el-icon-s-data',
							id: 9
						},
						{
							menuUrl: '/historyList',
							menuLevel: 1,
							menuName: '历史数据',
							menuIcon: 'el-icon-s-data',
							id: 10
						}
					]
				},
				{
					id: 3,
					menuUrl: '/Model',
					menuName: '模型管理',
					menuIcon: 'el-icon-lx-cascades',
					child: [
						{
							menuUrl: '/Model',
							menuLevel: 1,
							menuName: '模型配置',
							menuIcon: 'el-icon-lx-cascades',
							id: 5
						},
						{
							menuUrl: '/ModelTest',
							menuLevel: 1,
							menuName: '模型训练',
							menuIcon: 'el-icon-lx-cascades',
							id: 6
						}
					]
				},
				{
					id: 4,
					menuUrl: '/Strategy',
					menuName: '策略管理',
					menuIcon: 'el-icon-menu',
					child: [
						{
							menuUrl: '/Strategy',
							menuLevel: 1,
							menuName: '策略配置',
							menuIcon: 'el-icon-menu',
							id: 7
						},
						{
							menuUrl: '/StrategyTester',
							menuLevel: 1,
							menuName: '策略测试',
							menuIcon: 'el-icon-menu',
							id: 8
						}
					]
					
				},
				{
					id: 5,
					menuUrl: '/company',
					menuName: '交易管理',
					menuIcon: 'el-icon-lx-settings',
				},
			]
		};
	},
	computed: {
		onRoutes() {
			return this.$route.path.replace('/', '');
		}
	},
	watch:{
	  $route(to,from){
		  this.activePath = to.path
	  }
	},
	created() {
		this.activePath = window.sessionStorage.getItem('activePath');
		// 通过 Event Bus 进行组件间通信，来折叠侧边栏
		bus.$on('collapse', msg => {
			this.collapse = msg;
			bus.$emit('collapse-content', msg);
		});
	},
	methods:{
		// 保存链接的激活状态
		saveNavState(activePath) {
			window.sessionStorage.setItem('activePath', activePath);
			this.activePath = activePath;
		},
	}
};
</script>

<style scoped>
	.icon{
		padding-right: 6px;
	}
.sidebar {
	display: block;
	position: absolute;
	left: 0;
	top: 55px;
	bottom: 0;
	overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
	width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
	width: 250px;
}
.sidebar > ul {
	height: 100%;
}
</style>
